<!DOCTYPE HTML>
<HTML>
	<HEAD>
		<TITLE>Indexing</TITLE>
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="jquery.filedrop.js"></script>
		<script type="text/javascript" src="porterStemmer.js"></script>
		<!--<script type="text/javascript" src="skipList.js"></script>-->
		<!--<script type="text/javascript" src="deltaList.js"></script>-->
		<!--<script type="text/javascript" src="binaryTreeAK.js"></script>-->
		<script type="text/javascript" src="FrontFaceBTree.js"></script>
		<script type="text/javascript" src="indexing.js"></script>
		<script type="text/javascript" src="soundex.js"></script>
		<style type="text/css">
			html, body, p{
				margin: 0;
				padding: 0;
			}
			#dropbox{
				width: 100%;
				height: 200px;
				line-height: 200px;
				text-align: center;
				background-color: #ffffcc;
				font-weight: bold;
			}
			#left{
				float: left;
				width: 50%;
				box-sizing: border-box;
				padding: 5px;
			}
			#right{
				display: none;
				float: right;
				width: 50%;
				box-sizing: border-box;
				padding: 5px;
			}
			#searchDetail,
			#indexDetail,
			#indexTable,
			#progress{
				display: none;
			}
			tbody tr:nth-child(odd){
				background-color: #eee;
			}
			progress{
				width: 100%;
			}
			#searchText{
				width: 100%;
			}
		</style>
	</HEAD>
	<BODY>
		<div id="left">
			<div id="dropbox">
				<p>Drop text-file(s) here</p>
			</div>
			<div id="progress">
				<progress id="fileProgress" value="0"></progress>
			</div>
			<div id="indexDetail">
				<hr/>
				<table>
					<thead>
						<tr>
							<th>ID</th><th>Filename</th>
						</tr>
					</thead>
					<tbody id="fileTableRows">
						
					</tbody>
				</table>
				<hr/>
				<!--<p>Index size: <span id="indexSizeCount"></span> Entries</p>
				<input type="button" value="Show Index" id="showIndex"/>
				<table id="indexTable">
					<thead>
						<tr>
							<th>Word</th><th>Freq.</th><th>File IDs</th>
						</tr>
					</thead>
					<tbody id="indexTableRows">
						
					</tbody>
				</table>-->
			</div>
		</div>
		<div id="right">
			<p>Search:</p>
			<input type="text" id="searchText" value="((abused|academy)&(accident|accent)) & accident"/>
			<input type="button" value="Search" id="searchBtn"/>
			<div id="searchDetail">
				<hr/>
				<p>Occurance (<span id="resultCount"></span> Results):</p>
				<table>
					<thead>
						<tr>
							<th>ID</th><th>Filename</th>
						</tr>
					</thead>
					<tbody id="occuranceTableRows">
						
					</tbody>
				</table>
			</div>
		</div>
			<pre id="debug" style="clear: both;">
			
			</pre>
	</BODY>
</HTML>